<template>
  <div class="cloud-backup-container">
    <!-- 头部区域 -->
    <el-card class="header-card" shadow="hover">
      <div class="header-content">
        <div class="header-left">
          <div class="title-section">
            <h2 class="main-title">云硬盘备份服务</h2>
            <el-tag type="success" effect="plain" class="service-tag">企业版</el-tag>
          </div>
          <p class="description">创建云硬盘备份，为磁盘提供保护。如需周期性备份，设置启用的备份策略即可。如需手动创建备份，单击存储库列表操作栏“执行备份”。</p>
          <!-- <div class="action-buttons">
            <el-button type="primary" icon="el-icon-plus" @click="showCreateBackupDialog">创建备份</el-button>
            <el-button icon="el-icon-time" @click="showBackupPlanDialog">备份计划</el-button>
            <el-button icon="el-icon-document" @click="showBackupPolicyDialog">备份策略</el-button>
          </div> -->
        </div>
        <div class="header-right">
          <div class="stats-panel">
            <div class="stat-item">
              <div class="stat-value">{{ backupStats.total }}</div>
              <div class="stat-label">备份总数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ formatSize(backupStats.totalSize) }}</div>
              <div class="stat-label">总存储容量</div>
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 工具栏区域 -->

    <el-card class="table-card" shadow="hover">
      <!-- 标签页 -->
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane name="config">
          <span slot="label">
            <i class="el-icon-cpu"></i>存储库
          </span>

          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">

            </el-col>
            <el-col :span="1.5">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-refresh"
                :loading="loading"
                @click="handleSearch1"
              >查询</el-button>
            </el-col>
            <el-col :span="1.5">
            </el-col>
          </el-row>


          <el-table
            :data="memoryPool"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="名称/ID" min-width="200">
              <template slot-scope="{ row }">
                <div class="repository-name">
                  <el-tooltip :content="row.id" placement="top">
                  </el-tooltip>
                  <div class="name-container">
                    <span class="name">{{ row.name }}</span>

                  </div>
                  <div class="name-container">
                    <span class="name">{{ row.id }}</span>

                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
              <template slot-scope="{ row }">
                <el-tag
                  :type="row.resources && row.resources.length > 0 && row.resources[0].protect_status === 'available' ? 'success' : 'info'"
                  size="small"
                  effect="plain"
                >
                  {{ getMemoryStatusName(row.resources && row.resources.length > 0 ? row.resources[0].protect_status : '') }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="类型" width="120" align="center">
              <template slot-scope="{ row }">
                <span>{{ getResourceTypeName(row.resources && row.resources.length > 0 ? row.resources[0].type : '') }}</span>
              </template>
            </el-table-column>

            <el-table-column label="备价锁定" width="120" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.locked ? '已锁定' : '未开启' }}</span>
              </template>
            </el-table-column>

            <el-table-column label="规格" width="120" align="center">
              <template slot-scope="{ row }">
                <span>服务器备份</span>
              </template>
            </el-table-column>

            <el-table-column label="备份数" width="120" align="center">
              <template slot-scope="{ row }">
                <span>单AZ备份</span>
              </template>
            </el-table-column>

            <el-table-column label="已存储/总存储容量..." min-width="200">
              <template slot-scope="{ row }">
                <div class="storage-usage" v-if="row.resources && row.resources.length > 0">
                  <el-progress
                    :percentage="calculatePercentage(row.resources[0].backup_size*1024*1024, row.resources[0].size*1024*1024*1024)"
                    :color="getProgressColor(calculatePercentage(row.resources[0].backup_size*1024*1024, row.resources[0].size*1024*1024*1024))"
                    :show-text="false"
                    :stroke-width="12"
                  />
                  <span class="usage-text">{{ formatSize(row.resources[0].backup_size*1024*1024) }}/{{ formatSize(row.resources[0].size*1024*1024*1024) }}</span>
                </div>
                <div v-else>--/--</div>
              </template>
            </el-table-column>

            <el-table-column label="备份策略" width="120" align="center">
              <template slot-scope="{ row }">
                <span>未绑定</span>
              </template>
            </el-table-column>

            <el-table-column label="已确定" width="100" align="center">
              <template slot-scope="{ row }">
                <el-tag
                  :type="row.confirmed ? 'success' : 'info'"
                  size="small"
                  effect="plain"
                >
                  {{ row.confirmed ? '已确定' : '未确定' }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="200" fixed="right">
              <template slot-scope="{ row }">
                <el-button type="text" size="small" @click="">绑定磁盘</el-button>
                <el-button type="text" size="small" @click="handleBackup(row)">执行备份</el-button>
<!--                <el-dropdown trigger="click" @command="(command) => handleMoreActions(command, row)">-->
<!--                  <el-button type="text" size="small">-->
<!--                    更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                  </el-button>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item command="details">查看详情</el-dropdown-item>-->
<!--                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination
            v-show="total1>0"
            :total="total1"
            :page.sync="queryParams1.pageNum"
            :limit.sync="queryParams1.pageSize"
            @pagination="getMemoryList"
          />
        </el-tab-pane>

        <el-tab-pane name="idle">
          <span slot="label">
            <i class="el-icon-timer"></i>备份副本</span>


          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-cpu"
                :disabled="!selectedVulnerabilities.length"
                @click="handleDelete"
              >删除</el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-refresh"
                :loading="loading"
                @click="handleSearch2"
              >刷新</el-button>
            </el-col>
            <el-button
              type="primary"
              size="small"
              icon="el-icon-download"
              @click="exportData"
            >导出</el-button>
            <el-col :span="1.5">
            </el-col>
          </el-row>
          <el-table
            :data="backups"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center" />

            <el-table-column label="名称/ID" min-width="200">
              <template slot-scope="{ row }">
                <div class="repository-name">
                  <el-tooltip :content="row.id" placement="top">
                  </el-tooltip>
                  <div class="name-container">
                    <span class="name">{{ row.name }}</span>

                  </div>
                  <div class="name-container">
                    <span class="name">{{ row.id }}</span>

                  </div>
                </div>
              </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
              <template slot-scope="{ row }">
                <el-tag
                  :type="row.status === 'available' ? 'success' : 'info'"
                  size="small"
                  effect="plain"
                >
                  {{ getMemoryStatusName(row.status) }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column label="备份类型" width="120" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.image_type }}</span>
              </template>
            </el-table-column>

            <el-table-column label="服务器名称" width="120" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.resource_name }}</span>
              </template>
            </el-table-column>

            <el-table-column label="服务器类型" width="120" align="center">
              <template slot-scope="{ row }">
                <span>{{ getResourceTypeName(row.resource_type)  }}</span>
              </template>
            </el-table-column>


            <el-table-column label="创建时间" width="180" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.created_at }}</span>
              </template>
            </el-table-column>


            <el-table-column label="操作" width="200" fixed="right">
              <template slot-scope="{ row }">
                <el-button type="text" size="small" @click="handleDelete(row)">删除</el-button>
                <el-button type="text" size="small" @click="handleBackup(row)">备份</el-button>
<!--                <el-dropdown trigger="click" @command="(command) => handleMoreActions(command, row)">-->
<!--                  <el-button type="text" size="small">-->
<!--                    更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>-->
<!--                  </el-button>-->
<!--                  <el-dropdown-menu slot="dropdown">-->
<!--                    <el-dropdown-item command="details">查看详情</el-dropdown-item>-->
<!--                    <el-dropdown-item command="delete" divided>删除</el-dropdown-item>-->
<!--                  </el-dropdown-menu>-->
<!--                </el-dropdown>-->
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <pagination
            v-show="total2>0"
            :total="total2"
            :page.sync="queryParams2.pageNum"
            :limit.sync="queryParams2.pageSize"
            @pagination="getBackupList"
          />
        </el-tab-pane>
      </el-tabs>
    </el-card>


    <!-- 创建备份对话框 -->
    <el-dialog
      title="创建备份"
      :visible.sync="createBackupDialogVisible"
      width="600px"
      custom-class="backup-dialog"
      :modal="false"
    >
      <el-form :model="backupForm" label-width="120px" class="backup-form">
        <el-form-item label="备份类型">
          <el-radio-group v-model="backupForm.type">
            <el-radio label="database">数据库备份</el-radio>
            <el-radio label="server">服务器备份</el-radio>
            <el-radio label="application">应用备份</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备份资源">
          <el-select v-model="backupForm.resourceId" placeholder="请选择备份资源" style="width: 100%">
            <el-option-group
              v-for="group in resourceOptions"
              :key="group.label"
              :label="group.label"
            >
              <el-option
                v-for="item in group.options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-option-group>
          </el-select>
        </el-form-item>
        <el-form-item label="备份名称">
          <el-input v-model="backupForm.name" placeholder="请输入备份名称"></el-input>
        </el-form-item>
        <el-form-item label="备份描述">
          <el-input
            type="textarea"
            v-model="backupForm.description"
            placeholder="请输入备份描述"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="保留时间">
          <el-select v-model="backupForm.retentionDays" placeholder="请选择保留时间" style="width: 100%">
            <el-option label="7天" :value="7"></el-option>
            <el-option label="14天" :value="14"></el-option>
            <el-option label="30天" :value="30"></el-option>
            <el-option label="90天" :value="90"></el-option>
            <el-option label="180天" :value="180"></el-option>
            <el-option label="365天" :value="365"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createBackupDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleCreateBackup">立即创建</el-button>
      </div>
    </el-dialog>

    <!-- 备份计划对话框 -->
    <el-dialog
      title="备份计划"
      :visible.sync="backupPlanDialogVisible"
      width="700px"
      custom-class="backup-plan-dialog"
      :modal="false"
    >
      <div class="backup-plan-tabs">
        <el-tabs v-model="activePlanTab">
          <el-tab-pane label="自动备份计划" name="auto">
            <el-table :data="backupPlans" style="width: 100%">
              <el-table-column label="资源名称" prop="resourceName"></el-table-column>
              <el-table-column label="资源类型" prop="resourceType" width="120"></el-table-column>
              <el-table-column label="备份周期" width="120">
                <template slot-scope="{ row }">
                  {{ getBackupCycleName(row.cycle) }}
                </template>
              </el-table-column>
              <el-table-column label="备份时间" width="120">
                <template slot-scope="{ row }">
                  {{ row.time }}
                </template>
              </el-table-column>
              <el-table-column label="保留时间" width="120">
                <template slot-scope="{ row }">
                  {{ row.retentionDays }}天
                </template>
              </el-table-column>
              <el-table-column label="状态" width="100">
                <template slot-scope="{ row }">
                  <el-switch
                    v-model="row.enabled"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="handlePlanStatusChange(row)"
                  ></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="120">
                <template slot-scope="{ row }">
                  <el-button type="text" @click="handleEditPlan(row)">编辑</el-button>
                  <el-button type="text" @click="handleDeletePlan(row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="plan-actions">
              <el-button type="primary" icon="el-icon-plus" @click="handleAddPlan">添加计划</el-button>
            </div>
          </el-tab-pane>
          <el-tab-pane label="备份历史记录" name="history">
            <el-table :data="backupHistory" style="width: 100%">
              <el-table-column label="备份名称" prop="name"></el-table-column>
              <el-table-column label="资源名称" prop="resourceName" width="150"></el-table-column>
              <el-table-column label="备份时间" prop="createTime" width="180"></el-table-column>
              <el-table-column label="备份大小" width="120">
                <template slot-scope="{ row }">
                  {{ formatSize(row.size) }}
                </template>
              </el-table-column>
              <el-table-column label="状态" width="120">
                <template slot-scope="{ row }">
                  <el-tag :type="getStatusType(row.status)" size="small">
                    {{ getStatusName(row.status) }}
                  </el-tag>
                </template>
              </el-table-column>
            </el-table>
            <div class="history-pagination">
              <el-pagination
                background
                @current-change="handleHistoryPageChange"
                :current-page="historyPage"
                :page-size="10"
                layout="prev, pager, next"
                :total="historyTotal"
              >
              </el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>

    <!-- 备份策略对话框 -->
    <el-dialog
      title="备份策略"
      :visible.sync="backupPolicyDialogVisible"
      width="600px"
      custom-class="backup-policy-dialog"
      :modal="false"
    >
      <el-form :model="policyForm" label-width="120px" class="policy-form">
        <el-form-item label="默认保留时间">
          <el-select v-model="policyForm.defaultRetention" style="width: 100%">
            <el-option label="7天" :value="7"></el-option>
            <el-option label="14天" :value="14"></el-option>
            <el-option label="30天" :value="30"></el-option>
            <el-option label="90天" :value="90"></el-option>
            <el-option label="180天" :value="180"></el-option>
            <el-option label="365天" :value="365"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="存储位置">
          <el-radio-group v-model="policyForm.storageLocation">
            <el-radio label="local">本地存储</el-radio>
            <el-radio label="cloud">云存储</el-radio>
            <el-radio label="both">本地+云存储</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="加密备份">
          <el-switch v-model="policyForm.encryption"></el-switch>
        </el-form-item>
        <el-form-item label="压缩备份">
          <el-switch v-model="policyForm.compression"></el-switch>
        </el-form-item>
        <el-form-item label="备份通知">
          <el-checkbox-group v-model="policyForm.notifications">
            <el-checkbox label="success">备份成功通知</el-checkbox>
            <el-checkbox label="failure">备份失败通知</el-checkbox>
            <el-checkbox label="warning">备份警告通知</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="通知方式" v-if="policyForm.notifications.length > 0">
          <el-checkbox-group v-model="policyForm.notificationMethods">
            <el-checkbox label="email">邮件</el-checkbox>
            <el-checkbox label="sms">消息</el-checkbox>
            <el-checkbox label="wechat">微信</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="backupPolicyDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSavePolicy">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 恢复备份对话框 -->
    <el-dialog
      title="恢复备份"
      :visible.sync="restoreDialogVisible"
      width="600px"
      custom-class="restore-dialog"
      :modal="false"
    >
      <div class="restore-info" v-if="selectedBackup">
        <div class="restore-warning">
          <i class="el-icon-warning"></i>
          <span>恢复操作将覆盖目标资源的当前数据，请谨慎操作！</span>
        </div>
        <div class="backup-details">
          <div class="detail-row">
            <span class="detail-label">备份名称:</span>
            <span class="detail-value">{{ selectedBackup.name }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">备份资源:</span>
            <span class="detail-value">{{ selectedBackup.resourceName }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">备份时间:</span>
            <span class="detail-value">{{ selectedBackup.createTime }}</span>
          </div>
          <div class="detail-row">
            <span class="detail-label">备份大小:</span>
            <span class="detail-value">{{ formatSize(selectedBackup.size) }}</span>
          </div>
        </div>
      </div>
      <el-form :model="restoreForm" label-width="120px" class="restore-form">
        <el-form-item label="恢复目标">
          <el-radio-group v-model="restoreForm.targetType">
            <el-radio label="original">原始资源</el-radio>
            <el-radio label="new">新资源</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="目标资源" v-if="restoreForm.targetType === 'new'">
          <el-select v-model="restoreForm.targetResourceId" placeholder="请选择目标资源" style="width: 100%">
            <el-option
              v-for="item in compatibleResources"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="恢复选项">
          <el-checkbox-group v-model="restoreForm.options">
            <el-checkbox label="overwrite">覆盖现有数据</el-checkbox>
            <el-checkbox label="withUsers" v-if="selectedBackup && selectedBackup.type === 'database'">恢复用户和权限</el-checkbox>
            <el-checkbox label="withConfig" v-if="selectedBackup && selectedBackup.type === 'server'">恢复配置</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="restoreDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmRestore">开始恢复</el-button>
      </div>
    </el-dialog>

    <!-- 备份详情对话框 -->
    <el-dialog
      title="备份详情"
      :visible.sync="detailsDialogVisible"
      width="700px"
      custom-class="details-dialog"
      :modal="false"
    >
      <div class="backup-details-content" v-if="selectedBackup">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="备份名称">{{ selectedBackup.name }}</el-descriptions-item>
          <el-descriptions-item label="备份ID">{{ selectedBackup.id }}</el-descriptions-item>
          <el-descriptions-item label="备份类型">{{ getBackupTypeName(selectedBackup.type) }}</el-descriptions-item>
          <el-descriptions-item label="备份方式">{{ selectedBackup.isAuto ? '自动备份' : '手动备份' }}</el-descriptions-item>
          <el-descriptions-item label="备份资源">{{ selectedBackup.resourceName }}</el-descriptions-item>
          <el-descriptions-item label="资源类型">{{ selectedBackup.resourceType }}</el-descriptions-item>
          <el-descriptions-item label="备份时间">{{ selectedBackup.createTime }}</el-descriptions-item>
          <el-descriptions-item label="备份大小">{{ formatSize(selectedBackup.size) }}</el-descriptions-item>
          <el-descriptions-item label="备份状态">
            <el-tag :type="getStatusType(selectedBackup.status)" size="small">
              {{ getStatusName(selectedBackup.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="保留时间">{{ selectedBackup.retentionDays }}天</el-descriptions-item>
          <el-descriptions-item label="备份描述" :span="2">{{ selectedBackup.description || '无' }}</el-descriptions-item>
        </el-descriptions>

        <div class="details-section" v-if="selectedBackup.files && selectedBackup.files.length > 0">
          <div class="section-title">备份文件</div>
          <el-table :data="selectedBackup.files" style="width: 100%">
            <el-table-column label="文件名" prop="name"></el-table-column>
            <el-table-column label="大小" width="120">
              <template slot-scope="{ row }">
                {{ formatSize(row.size) }}
              </template>
            </el-table-column>
            <el-table-column label="修改时间" width="180" prop="modifiedTime"></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="{ row }">
                <el-button type="text" @click="handleDownloadFile(row)">下载</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="details-section">
          <div class="section-title">备份日志</div>
          <div class="log-content">
            <div v-for="(log, index) in selectedBackup.logs" :key="index" class="log-item">
              <span class="log-time">{{ log.time }}</span>
              <span class="log-level" :class="'log-level-' + log.level">{{ log.level }}</span>
              <span class="log-message">{{ log.message }}</span>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">关 闭</el-button>
        <el-button type="primary" @click="handleRestore(selectedBackup)" v-if="selectedBackup && selectedBackup.status === 'completed'">恢复备份</el-button>
        <el-button type="success" @click="handleDownload(selectedBackup)" v-if="selectedBackup && selectedBackup.status === 'completed'">下载备份</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {cbrbackdlist, cbrbacklist, vaultsdlist, vaultslist, vulnerability} from "@/api/resell/orderinstance";

export default {
  name: 'CloudDiskBackup',
  props: {
    currentResource: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      // 视图控制
      activeTab: 'config',
      viewMode: 'list',
      loading: false,
      backupType: 'all',
      statusFilter: '',
      timeFilter: '',
      searchQuery: '',
      dateRange: null,
      selectedVulnerabilities: [],
      total1: 0,
      total2: 0,
      // 对话框
      createBackupDialogVisible: false,
      backupPlanDialogVisible: false,
      backupPolicyDialogVisible: false,
      restoreDialogVisible: false,
      detailsDialogVisible: false,

      // 表单数据
      backupForm: {
        type: 'database',
        resourceId: '',
        name: '',
        description: '',
        retentionDays: 30
      },

      policyForm: {
        defaultRetention: 30,
        storageLocation: 'cloud',
        encryption: true,
        compression: true,
        notifications: ['failure'],
        notificationMethods: ['email']
      },

      restoreForm: {
        targetType: 'original',
        targetResourceId: '',
        options: ['overwrite']
      },

      // 选中的备份
      selectedBackup: null,

      // 备份计划相关
      activePlanTab: 'auto',
      historyPage: 1,
      historyTotal: 0,

      // 备份统计
      backupStats: {
        total: 24,
        totalSize: 1024 * 1024 * 1024 * 15.7, // 15.7 GB
        todayCount: 3
      },
      //存储卡
      memoryPool:[],
      // 备份数据
      backups: [],

      // 备份计划
      backupPlans: [
        {
          id: 'plan-001',
          resourceName: 'MySQL主数据库',
          resourceType: '数据库',
          cycle: 'daily',
          time: '02:00',
          retentionDays: 30,
          enabled: true
        },
        {
          id: 'plan-002',
          resourceName: 'Web服务器01',
          resourceType: '服务器',
          cycle: 'weekly',
          time: '23:00',
          retentionDays: 90,
          enabled: true
        },
        {
          id: 'plan-003',
          resourceName: 'PostgreSQL分析库',
          resourceType: '数据库',
          cycle: 'daily',
          time: '03:00',
          retentionDays: 30,
          enabled: true
        },
        {
          id: 'plan-004',
          resourceName: '订单系统',
          resourceType: '应用',
          cycle: 'weekly',
          time: '01:00',
          retentionDays: 60,
          enabled: false
        }
      ],

      // 备份历史
      backupHistory: [
        {
          id: 'bak-h001',
          name: 'mysql-daily-20240304',
          resourceName: 'MySQL主数据库',
          createTime: '2024-03-04 02:00:10',
          size: 1024 * 1024 * 1024 * 2.2,
          status: 'completed'
        },
        {
          id: 'bak-h002',
          name: 'mysql-daily-20240303',
          resourceName: 'MySQL主数据库',
          createTime: '2024-03-03 02:00:05',
          size: 1024 * 1024 * 1024 * 2.1,
          status: 'completed'
        },
        {
          id: 'bak-h003',
          name: 'postgres-daily-20240304',
          resourceName: 'PostgreSQL分析库',
          createTime: '2024-03-04 03:00:15',
          size: 1024 * 1024 * 1024 * 3.1,
          status: 'completed'
        },
        {
          id: 'bak-h004',
          name: 'postgres-daily-20240303',
          resourceName: 'PostgreSQL分析库',
          createTime: '2024-03-03 03:00:20',
          size: 1024 * 1024 * 1024 * 3.0,
          status: 'completed'
        },
        {
          id: 'bak-h005',
          name: 'web-server-weekly-20240228',
          resourceName: 'Web服务器01',
          createTime: '2024-02-28 23:00:10',
          size: 1024 * 1024 * 1024 * 8.3,
          status: 'completed'
        }
      ],

      // 资源选项
      resourceOptions: [
        {
          label: '数据库',
          options: [
            { label: 'MySQL主数据库', value: 'db-001' },
            { label: 'PostgreSQL分析库', value: 'db-002' },
            { label: 'Redis缓存服务器', value: 'db-003' },
            { label: 'MongoDB文档库', value: 'db-004' }
          ]
        },
        {
          label: '服务器',
          options: [
            { label: 'Web服务器01', value: 'srv-001' },
            { label: 'Web服务器02', value: 'srv-002' },
            { label: '文件服务器', value: 'srv-003' },
            { label: '应用服务器', value: 'srv-004' }
          ]
        },
        {
          label: '应用',
          options: [
            { label: '订单系统', value: 'app-001' },
            { label: '用户中心', value: 'app-002' },
            { label: '支付网关', value: 'app-003' },
            { label: '报表系统', value: 'app-004' }
          ]
        }
      ],

      // 兼容资源
      compatibleResources: [
        { label: 'MySQL从数据库', value: 'db-005' },
        { label: 'MySQL测试库', value: 'db-006' },
        { label: '开发环境数据库', value: 'db-007' }
      ],
      localCurrentResource: {},  // 本地存储当前选中的资源
      queryParams1: {
        pageNum: 1,
        pageSize: 10
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 10
      },
    }
  },
  computed: {
    // 表格样式
    tableHeaderStyle() {
      return {
        background: '#f5f7fa',
        color: '#606266',
        fontWeight: 500,
        height: '50px'
      }
    },
  },
  methods: {
    // 获取备份列表
    getMemoryList() {
      this.loading = true


      this.localCurrentResource.pagesize = this.queryParams1.pageSize;
      this.localCurrentResource.pagenum =this.queryParams1.pageNum;
      vaultsdlist(this.localCurrentResource).then(response => {
        this.loading = false
        console.log(response);
        if(response.code===200) {
          this.total1 = response.total
          console.log(this.total1);
          this.memoryPool = response.rows;

          this.backupStats.totalSize =  this.memoryPool[0].resources[0].size*1024*1024*1024;
          this.backupStats.total =  this.memoryPool[0].resources[0].backup_count;
        }
        if(response.code===500) {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })


    },
    // 获取备份列表//云硬盘备份列表
    getBackupList() {
      this.loading = true


      this.localCurrentResource.pagesize = this.queryParams2.pageSize;
      this.localCurrentResource.pagenum =this.queryParams2.pageNum;
      cbrbackdlist(this.localCurrentResource).then(response => {
        this.loading = false
        console.log(response);
        if(response.code===200) {
          this.total2 = response.total
          console.log(this.total2);
          this.backups = response.rows;
        }
        if(response.code===500) {
          this.$message({
            message: response.msg,
            type: 'error'
          })
        }
      })


    },

    // 标签页切换
    handleTabClick(tab) {
      console.log('Tab clicked:', tab.name);
      // 如果数据为空，显示提示信息
      if (this.memoryPool.length === 0 || !this.memoryPool.some(item => item.resources && item.resources.length > 0)) {
        this.$message.info('暂无备份数据');
      }
    },
    handleTabClick2(tab)
    {
      console.log('Tab clicked:', tab.name);
      // 如果数据为空，显示提示信息
      if (this.memoryPool.length === 0 || !this.memoryPool.some(item => item.resources && item.resources.length > 0)) {
        this.$message.info('暂无备份数据');
      }
    },
    // 格式化大小
    formatSize(bytes) {
      if (bytes === 0) return '0 B'

      const k = 1024
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))

      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    },
    // 添加计算百分比的方法
    calculatePercentage(used, total) {
      if (!used || !total || total === 0) return 0;
      const percentage = (used / total) * 100;
      return Math.min(Math.max(percentage, 0), 100);
    },
    // 获取进度条颜色
    getProgressColor(percentage) {
      if (percentage < 60) return '#67C23A';  // 绿色
      if (percentage < 80) return '#E6A23C';  // 黄色
      return '#F56C6C';  // 红色
    },
    exportData() {
      this.$message({
        type: 'success',
        message: '正在导出数据，请稍候...'
      })
    },
    // 表格选择
    handleSelectionChange(selection) {
      this.selectedRepositories = selection
    },

    // 获取备份类型图标
    getBackupTypeIcon(type) {
      const icons = {
        'database': 'el-icon-coin',
        'server': 'el-icon-monitor',
        'application': 'el-icon-s-platform'
      }
      return icons[type] || 'el-icon-document'
    },

    // 获取备份类型标签类型
    getBackupTypeTagType(type) {
      const types = {
        'database': 'primary',
        'server': 'success',
        'application': 'warning'
      }
      return types[type] || 'info'
    },

    // 获取备份类型名称
    getBackupTypeName(type) {
      const names = {
        'database': '数据库备份',
        'server': '服务器备份',
        'application': '应用备份'
      }
      return names[type] || '未知类型'
    },

    // 获取状态类型
    getStatusType(status) {
      const types = {
        'completed': 'success',
        'in-progress': 'warning',
        'failed': 'danger'
      }
      return types[status] || 'info'
    },
    // 获取内存池状态名称
    getMemoryStatusName(status) {
      if (!status) return '未知';

      const statusMap = {
        'available': '可用',
        'creating': '创建中',
        'error': '错误',
        'deleting': '删除中',
        'deleted': '已删除'
      };

      return statusMap[status] || status;
    },
    // 获取状态图标
    getStatusIcon(status) {
      const icons = {
        'completed': 'el-icon-check',
        'in-progress': 'el-icon-loading',
        'failed': 'el-icon-close'
      }
      return icons[status] || 'el-icon-info'
    },

    // 获取状态名称
    getStatusName(status) {
      const names = {
        'completed': '完成',
        'in-progress': '进行中',
        'failed': '失败'
      }
      return names[status] || '未知'
    },

    // 获取备份周期名称
    getBackupCycleName(cycle) {
      const names = {
        'daily': '每天',
        'weekly': '每周',
        'monthly': '每月'
      }
      return names[cycle] || '未知'
    },

    handleSearch1() {
      this.getMemoryList()
    },

    // 搜索处理
    handleSearch2() {
      this.getBackupList()
    },



    // 行点击处理
    handleRowClick(row) {
      this.handleViewDetails(row)
    },

    // 显示创建备份对话框
    showCreateBackupDialog() {
      this.backupForm = {
        type: 'database',
        resourceId: '',
        name: '',
        description: '',
        retentionDays: 30
      }
      this.createBackupDialogVisible = true
    },

    // 显示备份计划对话框
    showBackupPlanDialog() {
      this.activePlanTab = 'auto'
      this.historyPage = 1
      this.backupPlanDialogVisible = true
    },

    // 显示备份策略对话框
    showBackupPolicyDialog() {
      this.backupPolicyDialogVisible = true
    },

    // 创建备份
    handleCreateBackup() {
      // 获取选中的资源信息
      let resourceName = ''
      let resourceType = ''

      this.resourceOptions.forEach(group => {
        const resource = group.options.find(option => option.value === this.backupForm.resourceId)
        if (resource) {
          resourceName = resource.label
          resourceType = group.label === '数据库' ?
            (resourceName.includes('MySQL') ? 'MySQL 8.0' :
              resourceName.includes('PostgreSQL') ? 'PostgreSQL 14' :
                resourceName.includes('Redis') ? 'Redis 6.2' :
                  resourceName.includes('MongoDB') ? 'MongoDB 5.0' : '数据库') :
            group.label === '服务器' ?
              (resourceName.includes('Web') ? 'CentOS 7.9' :
                resourceName.includes('文件') ? 'Windows Server 2019' :
                  resourceName.includes('应用') ? 'Ubuntu 20.04' : '服务器') :
              (resourceName.includes('订单') ? 'Java应用' :
                resourceName.includes('用户') ? 'Node.js应用' :
                  resourceName.includes('支付') ? 'Python应用' :
                    resourceName.includes('报表') ? 'PHP应用' : '应用')
        }
      })

      // 生成备份名称（如果用户未输入）
      if (!this.backupForm.name) {
        const date = new Date()
        const dateStr = date.getFullYear() +
          ('0' + (date.getMonth() + 1)).slice(-2) +
          ('0' + date.getDate()).slice(-2)
        const timeStr = ('0' + date.getHours()).slice(-2) +
          ('0' + date.getMinutes()).slice(-2)

        this.backupForm.name = resourceName.toLowerCase().replace(/\s+/g, '-') + '-' + dateStr + '-' + timeStr
      }

      // 创建新备份
      const newBackup = {
        id: 'bak-' + Math.random().toString(36).substr(2, 6),
        name: this.backupForm.name,
        type: this.backupForm.type,
        resourceName: resourceName,
        resourceType: resourceType,
        createTime: new Date().toLocaleString('zh-CN', { hour12: false }),
        duration: null,
        size: 0,
        status: 'in-progress',
        isAuto: false,
        retentionDays: this.backupForm.retentionDays,
        description: this.backupForm.description,
        logs: [
          {
            time: new Date().toLocaleString('zh-CN', { hour12: false }),
            level: 'info',
            message: '开始备份' + resourceName
          }
        ]
      }

      // 添加到备份列表
      this.backups.unshift(newBackup)
      this.total = this.filteredBackups.length

      // 更新统计信息
      this.backupStats.total++
      this.backupStats.todayCount++

      this.$message({
        message: '备份任务已创建，正在进行中',
        type: 'success'
      })

      this.createBackupDialogVisible = false

      // 模拟备份完成
      setTimeout(() => {
        const index = this.backups.findIndex(b => b.id === newBackup.id)
        if (index !== -1) {
          // 根据备份类型设置大小
          let size = 0
          if (this.backupForm.type === 'database') {
            size = 1024 * 1024 * 1024 * (Math.random() * 3 + 0.5)
          } else if (this.backupForm.type === 'server') {
            size = 1024 * 1024 * 1024 * (Math.random() * 10 + 5)
          } else {
            size = 1024 * 1024 * 1024 * (Math.random() * 2 + 0.2)
          }

          // 更新备份信息
          this.backups[index].status = 'completed'
          this.backups[index].size = size
          this.backups[index].duration = Math.floor(Math.random() * 10 + 2) + '分钟'

          // 添加完成日志
          this.backups[index].logs.push({
            time: new Date().toLocaleString('zh-CN', { hour12: false }),
            level: 'info',
            message: '备份完成'
          })

          // 添加文件
          this.backups[index].files = []
          if (this.backupForm.type === 'database') {
            this.backups[index].files.push({
              name: resourceName.toLowerCase().replace(/\s+/g, '_') + '_backup.sql',
              size: size * 0.95,
              modifiedTime: new Date().toLocaleString('zh-CN', { hour12: false })
            })
            this.backups[index].files.push({
              name: resourceName.toLowerCase().replace(/\s+/g, '_') + '_schema.sql',
              size: size * 0.05,
              modifiedTime: new Date().toLocaleString('zh-CN', { hour12: false })
            })
          } else if (this.backupForm.type === 'server') {
            this.backups[index].files.push({
              name: resourceName.toLowerCase().replace(/\s+/g, '_') + '.img',
              size: size,
              modifiedTime: new Date().toLocaleString('zh-CN', { hour12: false })
            })
          } else {
            this.backups[index].files.push({
              name: resourceName.toLowerCase().replace(/\s+/g, '_') + '_data.zip',
              size: size * 0.8,
              modifiedTime: new Date().toLocaleString('zh-CN', { hour12: false })
            })
            this.backups[index].files.push({
              name: resourceName.toLowerCase().replace(/\s+/g, '_') + '_config.zip',
              size: size * 0.2,
              modifiedTime: new Date().toLocaleString('zh-CN', { hour12: false })
            })
          }

          // 更新统计信息
          this.backupStats.totalSize += size
        }
      }, 5000)
    },
    // 备份操作
    handleBackup(row) {
      this.$message({
        message: `开始备份 ${row.name}`,
        type: 'info'
      })
    },

    // 更多操作
    handleMoreActions(command, row) {
      switch (command) {
        case 'details':
          this.$router.push({
            name: 'RepositoryDetails',
            params: { id: row.id }
          })
          break
        case 'delete':
          this.$confirm('此操作将永久删除该存储库, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 实现删除逻辑
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }).catch(() => {})
          break
      }
    },
    // 保存备份策略
    handleSavePolicy() {
      this.$message({
        message: '备份策略已保存',
        type: 'success'
      })
      this.backupPolicyDialogVisible = false
    },

    // 恢复备份
    handleRestore(backup) {
      this.selectedBackup = backup
      this.restoreForm = {
        targetType: 'original',
        targetResourceId: '',
        options: ['overwrite']
      }
      this.restoreDialogVisible = true
    },

    // 确认恢复
    confirmRestore() {
      const targetName = this.restoreForm.targetType === 'original' ?
        this.selectedBackup.resourceName :
        this.compatibleResources.find(r => r.value === this.restoreForm.targetResourceId)?.label || '未知资源'

      this.$message({
        message: `正在将备份 ${this.selectedBackup.name} 恢复到 ${targetName}`,
        type: 'success'
      })
      this.restoreDialogVisible = false
    },

    // 下载备份
    handleDownload(backup) {
      this.$message({
        message: `正在准备下载备份: ${backup.name}`,
        type: 'success'
      })

      // 模拟下载
      setTimeout(() => {
        this.$message({
          message: `备份 ${backup.name} 已准备完成，开始下载`,
          type: 'success'
        })
      }, 1500)
    },

    // 下载备份文件
    handleDownloadFile(file) {
      this.$message({
        message: `正在下载文件: ${file.name}`,
        type: 'success'
      })
    },

    // 查看备份详情
    handleViewDetails(backup) {
      this.selectedBackup = backup
      this.detailsDialogVisible = true
    },

    // 删除备份
    handleDelete(backup) {
      this.$confirm(`确定要删除备份 ${backup.name} 吗？此操作不可逆`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 从列表中移除
        const index = this.backups.findIndex(b => b.id === backup.id)
        if (index !== -1) {
          // 更新统计信息
          this.backupStats.total--
          this.backupStats.totalSize -= this.backups[index].size

          // 如果是今天的备份，减少今日备份计数
          const today = new Date().toISOString().split('T')[0]
          const backupDate = new Date(this.backups[index].createTime).toISOString().split('T')[0]
          if (backupDate === today) {
            this.backupStats.todayCount--
          }

          // 移除备份
          this.backups.splice(index, 1)
          this.total = this.filteredBackups.length
        }

        this.$message({
          type: 'success',
          message: '备份已删除'
        })
      }).catch(() => {
        // 取消删除
      })
    },

    // 添加备份计划
    handleAddPlan() {
      this.$message({
        message: '添加备份计划功能正在开发中',
        type: 'info'
      })
    },

    // 编辑备份计划
    handleEditPlan(plan) {
      this.$message({
        message: `编辑备份计划: ${plan.resourceName}`,
        type: 'info'
      })
    },

    // 删除备份计划
    handleDeletePlan(plan) {
      this.$confirm(`确定要删除 ${plan.resourceName} 的备份计划吗？`, '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.backupPlans.findIndex(p => p.id === plan.id)
        if (index !== -1) {
          this.backupPlans.splice(index, 1)
        }

        this.$message({
          type: 'success',
          message: '备份计划已删除'
        })
      }).catch(() => {
        // 取消删除
      })
    },

    // 备份计划状态变更
    handlePlanStatusChange(plan) {
      this.$message({
        message: `${plan.resourceName} 的备份计划已${plan.enabled ? '启用' : '禁用'}`,
        type: 'success'
      })
    },

    // 备份历史分页变更
    handleHistoryPageChange(page) {
      this.historyPage = page
      // 这里可以加载不同页的历史数据
    },

    // 分页处理
    handleSizeChange(val) {
      this.pageSize = val
      this.getBackupList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getBackupList()
    },
    // 添加一个新方法用于转换存储库类型
    getResourceTypeName(type) {
      if (!type) return '--';

      const typeMap = {
        'OS::Nova::Server': '云服务器',
        'OS::Cinder::Volume': '云硬盘',
        'OS::Ironic::BareMetalServer': '裸金属服务器',
        'OS::Native::Server': '线下本地服务器',
        'OS::Sfs::Turbo': '弹性文件系统',
        'OS::Workspace::DesktopV2': '云桌面'
      };

      return typeMap[type] || type;
    },
  },
  created() {
    this.localCurrentResource = this.currentResource;  // 初始化本地数据属性
    this.getMemoryList()
    this.getBackupList()
  }
}
</script>

<style scoped>
.cloud-backup-container {
  padding: 0px;
}

/* 头部卡片样式 */
.header-card {
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.header-content {
  display: flex;
  position: relative;
}

.header-left {
  flex: 1;
  padding-right: 320px;
}

.title-section {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.main-title {
  font-size: 24px;
  color: #303133;
  margin: 0;
  margin-right: 12px;
}

.service-tag {
  font-size: 12px;
  height: 22px;
  line-height: 20px;
  padding: 0 8px;
}

.description {
  font-size: 14px;
  color: #606266;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 800px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.header-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;
}

.stats-panel {
  background: #f8faff;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.stat-item {
  flex: 1;
  min-width: 80px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: #409eff;
  margin-bottom: 8px;
}

.stat-label {
  font-size: 14px;
  color: #606266;
}

/* 工具栏样式 */
.toolbar-container {
  background: white;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.toolbar-section {
  display: flex;
  align-items: center;
  gap: 16px;
}

.left-section {
  flex: 1;
  min-width: 300px;
}

.center-section {
  flex: 2;
  justify-content: center;
  min-width: 300px;
}

.right-section {
  flex: 1;
  justify-content: flex-end;
  min-width: 300px;
}

.search-container {
  width: 300px;
}

.view-toggle {
  display: flex;
  gap: 8px;
}

/* 内容区域样式 */
.content-container {
  background: white;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
  min-height: 400px;
}

/* 表格样式 */
.backup-table {
  margin-bottom: 20px;
}

.backup-info {
  padding: 8px 0;
}

.backup-name {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.backup-name i {
  font-size: 18px;
  color: #409eff;
}

.name-text {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resource-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.resource-name {
  font-size: 13px;
  color: #606266;
}

.time-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.create-time, .duration {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #606266;
}

.create-time i, .duration i {
  font-size: 14px;
  color: #909399;
}

.status-info {
  display: flex;
  align-items: center;
}

.operation-buttons {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* 卡片视图样式 */
.backup-cards {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}

.backup-card {
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s;
  cursor: pointer;
}

.backup-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.backup-title {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 70%;
}

.backup-title i {
  font-size: 18px;
  color: #409eff;
}

.backup-name-text {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-tag {
  font-size: 12px;
}

.card-tags {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.card-resource {
  background: #f8faff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 16px;
}

.resource-title {
  font-size: 14px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.resource-value {
  font-size: 14px;
  color: #303133;
  margin-bottom: 4px;
}

.resource-type {
  font-size: 13px;
  color: #909399;
}

.card-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.detail-icon {
  font-size: 18px;
  color: #409eff;
  margin-top: 2px;
}

.detail-content {
  flex: 1;
}

.detail-label {
  font-size: 13px;
  color: #909399;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 14px;
  color: #303133;
  font-weight: 500;
}

.card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.empty-icon {
  font-size: 64px;
  color: #dcdfe6;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: #909399;
  margin-bottom: 24px;
}

/* 分页样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0;
}

/* 对话框样式 */
.backup-dialog >>> .el-dialog__body,
.backup-plan-dialog >>> .el-dialog__body,
.backup-policy-dialog >>> .el-dialog__body,
.restore-dialog >>> .el-dialog__body,
.details-dialog >>> .el-dialog__body {
  padding: 20px 30px;
}

.restore-warning {
  background: #fff6f6;
  border-left: 3px solid #f56c6c;
  padding: 12px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.restore-warning i {
  color: #f56c6c;
  font-size: 18px;
}

.backup-details {
  background: #f8faff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
}

.detail-row {
  display: flex;
  margin-bottom: 8px;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-label {
  width: 100px;
  color: #909399;
}

.detail-value {
  flex: 1;
  color: #303133;
}

.backup-details-content {
  max-height: 600px;
  overflow-y: auto;
}

.details-section {
  margin-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}

.log-content {
  background: #f8faff;
  border-radius: 8px;
  padding: 12px;
  max-height: 200px;
  overflow-y: auto;
  font-family: monospace;
}

.log-item {
  margin-bottom: 8px;
  font-size: 13px;
}

.log-time {
  color: #909399;
  margin-right: 8px;
}

.log-level {
  display: inline-block;
  width: 60px;
  text-align: center;
  margin-right: 8px;
  padding: 2px 4px;
  border-radius: 4px;
}

.log-level-info {
  background: #ecf5ff;
  color: #409eff;
}

.log-level-warning {
  background: #fdf6ec;
  color: #e6a23c;
}

.log-level-error {
  background: #fef0f0;
  color: #f56c6c;
}

.log-message {
  color: #303133;
}

.plan-actions {
  margin-top: 20px;
  text-align: right;
}

.history-pagination {
  margin-top: 20px;
  text-align: right;
}
/* 表格卡片样式 */
.table-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.baseline-name {
  display: flex;
  align-items: center;
  gap: 8px;
}

.name-text {
  font-weight: 500;
}

.risk-level {
  display: flex;
  align-items: center;
  justify-content: center;
}

.risk-count {
  color: #f56c6c;
  font-weight: 500;
}

.description-text {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 分页容器样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding: 10px 0;
}

/* 空内容样式 */
.empty-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #909399;
}

.empty-content i {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-content p {
  font-size: 16px;
}

/* 详情对话框样式 */
.details-dialog >>> .el-dialog__body {
  padding: 20px 30px;
}

.baseline-details {
  max-height: 600px;
  overflow-y: auto;
}

.details-section {
  margin-top: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ebeef5;
}
/* 响应式样式 */
@media screen and (max-width: 1400px) {
  .header-left {
    padding-right: 0;
  }

  .header-right {
    position: relative;
    width: 100%;
    margin-top: 20px;
  }

  .header-content {
    flex-direction: column;
  }

  .stats-panel {
    margin-top: 20px;
  }
}

@media screen and (max-width: 1200px) {
  .toolbar-container {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar-section {
    width: 100%;
    justify-content: flex-start;
  }

  .center-section {
    justify-content: flex-start;
  }

  .right-section {
    justify-content: flex-start;
  }

  .search-container {
    width: 100%;
    margin-top: 12px;
  }

  .view-toggle {
    margin-left: auto;
  }
}

@media screen and (max-width: 768px) {
  .cloud-backup-container {
    padding: 10px;
  }

  .action-buttons {
    flex-direction: column;
    width: 100%;
  }

  .action-buttons .el-button {
    width: 100%;
  }
}

/* 动画效果 */
.backup-card {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.el-button {
  transition: all 0.3s ease;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}
</style>
